<template>
  <section class="ten">
    <div class="main-container">
      <div id="十个一" class="title scrollpoint sp-effect3">
        <h1 class="title__h1">十个一准则</h1>
        <div class="title__line"></div>
        <h3 class="title__h3">Ten Ones Criterion</h3>
        <img class="title__icon" src="~@/assets/images/qian.png" />
      </div>
      <div class="content yd-flex yd-flex-hC">
        <div @mouseout="mouseout" class="scrollpoint sp-effect1 read-box" id="previewContainer">
          <div :style="{top: top + 'px'}" class="read__inn" id="contentContainer">
            <div class="read__item">
              <h2 id="一个好态度">一个好态度</h2>
              <p>虎年新春已经悄然而至，大家跨年夜是否过得还好？有没有和相爱的人在最后一刻相拥？无论好与坏，2021年都已经过去了，一切都已归零。小编希望自己在新的一年有一个好态度，对待生活，对待家人，对待好友，对待身边的一切事物，新的一年会是美好的。</p>
            </div>
						<div class="read__item">
              <h2 id="一生好习惯">一生好习惯</h2>
              <p>人的一生，总会伴随着无数的习惯，人生，也不过是无数习惯的总和，而好习惯和坏习惯都会纳入总和中，不过前者做的是加法，后者做的是减法。所以形成一个好习惯等于是让自己增值，小编是这么认为的，希望从2022年开始，全方位增值自己，而这第一步就是改掉自己懒惰、熬夜、打游戏、不运动等陋习，加油。</p>
            </div>
						<div id="一副好身心" class="read__item">
              <h2>一副好身心</h2>
              <p>小编自认还算一名健康青年，常年没啥子大病的，所以很少上医院。但2021年底，差不多十一月左右的时候，厄运来临，差不多三周，是天天跑医院，当时整个人每天基本都是病恹恹，做啥事都做不好。所有希望新的一年里，好好锻炼、好好运动、饮食注意、健康注意，没有一个好的身体，是找不到富婆的，不骗人。</p>
            </div>
						<div id="一项好技能" class="read__item">
              <h2>一项好技能</h2>
              <p>不知不觉已经当了两年社畜了，感觉一切都是那么的顺其自然、理所应当。从校园走上社会，自己看似准备好了一切，也好似一切都还没有准备，就这样走上了社会。不过，这些都不重要了，现在小编能做的就是在这社会中生存下去，而一项硬技能是一切的前提，希望2022年自己的能力有所再突破，更上一层楼。</p>
            </div>
						<div id="一种好思维" class="read__item">
              <h2>一种好思维</h2>
              <p>作为一名程序猿，思维是非常重要的，它可以用来衡量一个人的能力，就如现在外面很多大厂在招人，大多面试会有算法题这一关，它考的很多时候就是你思维能力的强弱，所以它在不知不觉当中已经成为衡量一个人的标准了，为此我们更应该去好好锻炼它，养成一种好思维。</p>
            </div>
						<div id="一手好文章" class="read__item">
              <h2>一手好文章</h2>
              <p>小编大概是从去年初开始在掘金平台上写文章的，那会想法真的很纯粹就是想写一些笔记，虽然写得很水，但是也算是一番心血，也不管别人怎么看，反正每写完一篇文章自己就很单纯的开心。这一年下来，大概写了几十篇文章，但是其实截止到目前为止，我已经快三个月没有发出新文章了，不是我懒，也不是我放弃了，只是近来是真的忙，工作、生活、情感等，占据了大部分时间，但还是一直在挤时间，草稿箱里其实也已经写完好几篇文章的，只是没有发出来，年后应该会陆续发出来的，我会继续坚持写下去的。希望自己几年后能真正写得出一手好文章。</p>
            </div>
						<div id="一嘴好口才" class="read__item">
              <h2>一嘴好口才</h2>
              <p>一个好口才的人往往更容易受人喜欢，小编很早就意识到自己很缺乏这方面的能力，这些年也一直有意识的去提升，走向外面、去社交、去沟通乃至去自我练习，但是成效依旧很小。我想这其中最重要的原因应该还是性格所致，当然也和程序员工作有点关系吧，新的一年里也希望有所改变吧。</p>
            </div>
						<div id="一面好精神" class="read__item">
              <h2>一面好精神</h2>
              <p>青春，应该是生机勃勃的景象，都说90后已经老了，但是我觉得吧，也未必，我们正值青春年华，何来老了一说呢。大概快两个月了吧，一直保持早睡早起的习惯，虽然偶尔周末还是会熬那么一会，但总体来说还是好的，基本一天下来精神饱满，上班基本都不会打盹，这才是年轻人，哈哈。</p>
            </div>
						<div id="一门好礼仪" class="read__item">
              <h2>一门好礼仪</h2>
              <p>一门好礼仪也是人生的必备条件，所谓礼多人不怪，老祖宗很早就教我们了，我们中华五千年的优秀传统可不能断。不管是生活还是职场，好的礼仪都能为自己加分，它是一个人软实力的部分体现，良好的礼仪知识是我们成功的必要垫脚石。</p>
            </div>
						<div id="一身好情怀" class="read__item">
              <h2>一身好情怀</h2>
              <p>情怀，或许讲起来比较高大尚，但小编把它认为是一种心境，心境通，则明达。我们最常讲的应该就是“爱国情怀”了，有国才有家，才有现在幸福的你，作为一个人，一个中国人，绝对、应该、无条件的爱自己的国家。这次疫病风暴袭来，虽然我们国难当头，但我们同时也看到，国人众志成城，可歌可泣的一幕幕，可以壮怀，可以痛饮，可以给人战胜瘟疫的信心和勇气。</p>
            </div>
          </div>
          <div @mouseover="mouseover('up')" class="read__btn up cursor"></div>
          <div @mouseover="mouseover('down')" class="read__btn down cursor"></div>
        </div>
				<div class="scrollpoint sp-effect5 outline-box">
					<div class="outline__row yd-flex-h-hL-vC">
						<div @click="detail('一个好态度')" class="outline__item cursor">
							<span>一个</span>
							<span>好态度</span>
						</div>
						<div @click="detail('一生好习惯')" class="outline__item cursor">
							<span>一生</span>
							<span>好习惯</span>
						</div>
						<div @click="detail('一副好身心')" class="outline__item cursor">
							<span>一副</span>
							<span>好身心</span>
						</div>
						<div @click="detail('一项好技能')" class="outline__item cursor">
							<span>一项</span>
							<span>好技能</span>
						</div>
						<div @click="detail('一种好思维')" class="outline__item cursor">
							<span>一种</span>
							<span>好思维</span>
						</div>
					</div>
					<div class="outline__row yd-flex-h-hL-vC">
						<div @click="detail('一手好文章')" class="outline__item cursor">
							<span>一手</span>
							<span>好文章</span>
						</div>
						<div @click="detail('一嘴好口才')" class="outline__item cursor">
							<span>一嘴</span>
							<span>好口才</span>
						</div>
						<div @click="detail('一面好精神')" class="outline__item cursor">
							<span>一面</span>
							<span>好精神</span>
						</div>
						<div @click="detail('一门好礼仪')" class="outline__item cursor">
							<span>一门</span>
							<span>好礼仪</span>
						</div>
						<div @click="detail('一身好情怀')" class="outline__item cursor">
							<span>一身</span>
							<span>好情怀</span>
						</div>
					</div>
				</div>
      </div>
    </div>
  </section>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  setup() {
		let top = ref(0);
		let timer = null;
		let previewHeight = 0;
		let contentHeight = 0;

		onMounted(() => {
			previewHeight = document.querySelector('#previewContainer').getBoundingClientRect().height;
			contentHeight = document.querySelector('#contentContainer').getBoundingClientRect().height;
		});

		let title = null;

    return {
			top,
			mouseover(flag) {
				clearInterval(timer);
				timer = setInterval(() => {
					if(flag === 'up') {
						if ((top.value * -1) > contentHeight - previewHeight) return clearInterval(timer);
						top.value -= 2;
					}else if(flag === 'down') {
						if (top.value >= 0) return clearInterval(timer);
						top.value += 2;
					}
				},30)
			},
			mouseout() {
				clearInterval(timer);
			},
			detail(text) {
				if(title === text) return;
				title = text;
				let targetTop = document.querySelector('#' + text).offsetTop - 22;
				top.value = -targetTop;
			}
		};
  },
});
</script>

<style scoped>
.content{
	margin-top: 40px;
}
.read-box {
  width: 380px;
  height: 440px;
  overflow: hidden;
  cursor: pointer;
	background-image: url('@/assets/images/tenBg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
  position: relative;
}
.read__inn{
  position: absolute;
	width: 100%;
  top: 0;
  left: 0;
	z-index: 10;
	box-sizing: border-box;
	padding: 2px 40px;
}
.read__item{
	font-size: 22px;
  text-align: left;
  font-family: "华文行楷";
	color: #666;
}
.read__item h2{
	font-size: 38px;
	text-align: center;
	margin: 20px 0;
}
.read__item p{
	text-indent: 44px;
}
.read__btn{
	position: absolute;
	left: 0;
	width: 100%;
	height: 220px;
	cursor: pointer;
	z-index: 20;
}
.read__btn.up{
  top: 0;
}
.read__btn.down{
    bottom: 0;
}

.outline__row{
	padding-left: 150px;
	margin-top: 34px;
}
.outline__item{
	position: relative;
	margin-left: -50px;
	transition: all 0.4s linear;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	border-width: 8px;
	border-style: solid;
	box-sizing: border-box;
	font-size: 24px;
	font-style: normal;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.6;
}
.outline__item:hover {
	z-index: 11;
	transform: scale(1.1);
}
.outline__item:hover span {
	transition: all 0.4s linear;
	animation: moveFromBottom 0.3s ease;
}
.outline__item:nth-child(1){ color: #4d9683; text-shadow: 0 1px 0 #9de3cf; border-color: #549e89; background-color: #51c9a7;}
.outline__item:nth-child(2){ color: #be607e; text-shadow: 0 1px 0 #de8ba5; border-color: #e499b0; background-color: #e67b9c;}
.outline__item:nth-child(3){ color: #5e9eb4; text-shadow: 0 1px 0 #adddec; border-color: #a2cfde; background-color: #7ec9e3;}
.outline__item:nth-child(4){ color: #ba9d5e; text-shadow: 0 1px 0 #f5e0ad; border-color: #dcc999; background-color: #f0cd78;}
.outline__item:nth-child(5){ color: #b468a2; text-shadow: 0 1px 0 #e8acd8; border-color: #d8abcd; background-color: #dd91cb;}
.outline__item:nth-child(1):hover{ color: #0f775c; text-shadow: 0 1px 0 #81e6c9; border-color: #0a8462; background-color: #00c18c;}
.outline__item:nth-child(2):hover{ color: #b12a55; text-shadow: 0 1px 0 #ff95b7; border-color: #ba335c; background-color: #ea5180;}
.outline__item:nth-child(3):hover{ color: #2883a2; text-shadow: 0 1px 0 #9cdef2; border-color: #4397b3; background-color: #55c1e5;}
.outline__item:nth-child(4):hover{ color: #ab8228; text-shadow: 0 1px 0 #ffe199; border-color: #b08f3e; background-color: #f8c64d;}
.outline__item:nth-child(5):hover{ color: #a33689; text-shadow: 0 1px 0 #ec97d6; border-color: #b7569f; background-color: #dd70c3;}
@keyframes moveFromBottom {
  from {
		transform: translateY(120%) scale(0.5);
		opacity: 0;
	}
	to {
		transform: translateY(0%) scale(1);
		opacity: 1;
	}
}
</style>
